<template>
    <!-- marketing/pages/promotion/recruit_plan/recruit_plan.wxml -->

    <view class="recruit_plan">
        <!-- <view class="box">
            <view class="box_title flex-row-start">
                <text>推广方法</text>
                <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-1.png"></image>
            </view>
            <view class="icon_tab flex-row-between">
                <block>
                    <view class="icon_tab_item flex-column-start">
                        <image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/3.png"></image>
                        <view class="title">
                            <view>发送邀请链接</view>
                            <view>或海报给好友</view>
                        </view>
                        <view class="dot"></view>
                    </view>
                    <view class="icon_tab_item flex-column-start">
                        <image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/2.png"></image>
                        <view class="title">
                            <view>好友点击链接</view>
                            <view>或扫码注册成功</view>
                        </view>
                        <view class="dot"></view>
                    </view>
                    <view class="icon_tab_item flex-column-start">
                        <image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/4.png"></image>
                        <view class="title">
                            <view>推广员</view>
                            <view>获得奖励</view>
                        </view>
                    </view>
                </block>
            </view>
        </view> -->

        <!-- <view class="box">
            <view class="box_title flex-row-start">
                <text>什么是推广员?</text>
                <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-1.png"></image>
            </view>
            <view class="explain_wrap">
                <view class="title">说明</view>
                <view class="desc">成为推广员，推广新用户注册，升级后可获得推广奖励。等级越高，奖励越多</view>
            </view>

            <view class="explain_wrap">
                <view class="title">特点</view>
                <view class="desc">准入门槛低，操作简单。</view>
            </view>
        </view> -->

        <view class="box">
            <view class="box_title flex-row-start">
                <text>活动规则</text>
                <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-1.png"></image>
            </view>
            <view class="explain_wrap">
                <view class="title">说明</view>
                <!-- <view class="desc">成为推广员，完成各类个人、团队任务，推广新用户注册，可获得现金等推广奖励。</view> -->
                <view class="desc">邀新升级：邀请新用户，升级推广等级获取不同等级奖励</view>
            </view>
        </view>

        <view class="box_view">
            <view class="recruit_class">
                <view class="recruit_class_item" v-for="(item, index) in ruleInfo" :key="index">
                    <view class="title_wrap flex-row-start">
                        <view class="level">LV{{ item.spreadLevelId }}</view>
                        <view class="title">{{ item.spreadLevelName }}</view>
                    </view>

                    <view class="desc">
                        需推广人数（人）: 
                        <text style="margin-left: 10rpx;">{{ item.needSpreadStartNum }}-{{ item.needSpreadEndNum }}</text>
                    </view>

                    <view class="card_wrap flex-row-start flex_wrap">
                        <!-- <view class="card_item flex-column-evenly" v-if="item.totalCouponMoney">
                            <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"></image>
                            <view class="title">￥{{ item.totalCouponMoney }}</view>
                            <view class="btn flex-row-center">
                                <image class="btn_frame" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"></image>
                                <view>优惠券</view>
                            </view>
                        </view> -->
                        <view class="card_item flex-column-evenly" v-if="item.rewardIntegral">
                            <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"></image>
                            <view class="title">{{ item.rewardIntegral }}分</view>
                            <view class="btn flex-row-center">
                                <image class="btn_frame" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"></image>
                                <view>积分</view>
                            </view>
                        </view>
                        <!-- <view class="card_item flex-column-evenly" v-if="item.serveFreeTimes">
                            <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"></image>
                            <view class="title">{{ item.serveFreeTimes }}次</view>
                            <view class="btn flex-row-center">
                                <image class="btn_frame" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"></image>
                                <view>免服务费次数</view>
                            </view>
                        </view> -->
                        <view class="card_item flex-column-evenly" v-if="item.rewardAmount">
                            <image class="bg" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/bg-2.png"></image>
                            <view class="title">{{ item.rewardAmount }}元</view>
                            <view class="btn flex-row-center">
                                <image class="btn_frame" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/frame.png"></image>
                                <view>奖励金</view>
                            </view>
                        </view>
                    </view>


                    <view class="cashCouponList" v-if="item.couponVoList|| item.cardVoList">
                        <template  v-if="item.couponVoList">
                            <view class="cashCouponItem" v-for="(item, index) in item.couponVoList" :key="index"
                                :style="{ backgroundImage: 'url(' + integralBg + ')' }">
                                <view>{{ item.couponTypeStr }}</view>
                                <view>
                                    <text style="font-size:20rpx;" v-if="item.couponTypeStr!='折扣券'">¥</text>
                                    {{ item.couponQuota }}
                                    <text style="font-size:20rpx;" v-if="item.couponTypeStr=='折扣券'">折 </text>
                                    <text style="font-size:22rpx;" v-if="item.num>1">X{{ item.num }}</text>  
                                </view>
                                <view>满{{item.useSillStr}}可用</view>
                            </view>
                        </template>
                        <template  v-if="item.cardVoList">
                            <view class="cashCouponItem" v-for="(item, index) in item.cardVoList" :key="index"
                                :style="{ backgroundImage: 'url(' + integralBg + ')' }">
                                <template  v-if="item.cardTypeStr=='次数卡'">
                                    <view>{{ item.cardTypeStr }}</view>
                                    <view>
                                        {{ item.cardQuota }}次
                                        <text v-if="item.num>1">X{{ item.num }}</text>
                                    </view>
                                    <view>低于{{item.useSillStr}}可用</view>
                                </template>
                                <template  v-if="item.cardTypeStr=='电量卡'">
                                    <view>{{ item.cardTypeStr }}</view>
                                    <view>
                                        {{ item.cardQuota }}度
                                        <text v-if="item.num>1">X{{ item.num }}</text>
                                    </view>
                                </template>
                                <template  v-if="item.cardTypeStr=='折扣卡'">
                                    <view>{{ item.cardTypeStr }}</view>
                                    <view>
                                        {{ item.cardQuota }}次
                                        <text v-if="item.num>1">X{{ item.num }}</text>
                                    </view>
                                    <view>满{{item.useSillStr}}可用</view>
                                </template>
                            </view>
                        </template>
                    </view>

                </view>
        
            </view>
        </view>

        <view class="box" v-if="reduceInfo.isDownLimit === 1">
            <view class="rules_title flex-row-start">降级规则</view>
            <view class="rules_desc">
                在{{ reduceInfo.days }}天内，未推广新用户，自动下降一个等级。
                <view></view>
                当有推广新用户时，等级自动恢复到对应推广区间对应的等级。
                <view></view>
                示例：
                <view></view>
                推广等级LV1，推广用户数为1-10；推广等级LV2，推广用户数为11-20；推广等级LV3，推广用户数为21-30；推广等级LV4，推广用户数为31-40；降级限 制时间为30天
                <view></view>
                示例1：用户1 推广人数为20，在30天内没有推广新用户，则自动从LV2降级为LV1，后续用户1有新增推广新用户时，累计推广新用户为21；等级自动恢复为LV3
                <view></view>
                示例2：用户2 推广人数为20，在30天内没有推广新用 户，则自动从LV2降级为LV1，30天后仍旧没有新增推 广新用户，则等级仍旧保持为LV1 示例3：用户3
                推广人数为30，在30天内没有推广新用 户，则自动从LV3降级为LV2，30天后仍旧没有新增推 广新用户，则自动从LV2降级为LV1
            </view>
        </view>

        <view style="height: 120rpx;"  v-if="detailInfo.auditStatus != 1"></view>
		<view class="bottomBtn" v-if="detailInfo.auditStatus != 1">
			<view class="button" :style="{ backgroundColor: defaultColor }" @tap="goPage">
				{{detailInfo.auditStatus == 0? "查看审核详情": detailInfo.auditStatus === 2? "查看原因并重新申请": "立即申请"}}
			</view>
		</view>
    </view>

    <!-- <view class="btn_wrap flex-row-center">
    <view class="btn flex-row-center">查看审核详情</view>
</view> -->

    <!-- 提示 -->
    <!-- <view class="tips flex-row-start">
    <image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/tips1.png"></image>
    <view class="text">您的推广员申请审核不通过，请修改后重新申请</view>
</view> -->

    <!-- <view class="tips tips_bg1 flex-row-start">
<image class="icon" src="https://oos-cn.ctyunapi.cn/front-end/static/marketingImg/marketing/images/tips2.png"></image>
<view class="text">您的推广员申请正在审核中，请耐心等待</view>
</view> -->
</template>

<script lang="ts">
var promotion_1 = require("../../../../api/marketing/promotion");
const { getRule, getReduceRule } = promotion_1
const app = getApp();

export default {
    data() {
        return {
            detailInfo: {},

			integralBg: `${app.globalData.imgUrl}/group1/image/bg-红包5991183492684728172.png`,

            dots: [
                {
                    title: '提交申请'
                },
                {
                    title: '审核通过'
                },
                {
                    title: '邀请新用户'
                },
                {
                    title: '获得奖励'
                }
            ],
            ruleInfo: {},
            reduceInfo: {
                isDownLimit: 0
            }
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {
        this.getAuditDetail()

        this.getRuleDetial();
        this.getReduceRuleDetail();
    },
    methods: {
        goPage() {
            if (this.detailInfo.auditStatus != 200) {
                uni.navigateTo({
                    url: "/marketing_page/pages/promotion/apply/details",
                });
            } else {
                uni.navigateTo({
                    url: "/marketing_page/pages/promotion/apply/apply",
                });
            }
        },
        async getAuditDetail() {
            promotion_1.auditDetail({
                plUserId: uni.getStorageSync("memberId"),
            }).then((res) => {
                const {
                    code,
                    data
                } = res;
                // 审核状态：0：待审核；1：审核通过；2：审核拒绝
                if (code == 200) {
                    this.setData({
                        detailInfo: data || {
                            auditStatus: 200
                        },
                    });
                }

                console.log(this.detailInfo, 'detailInfo')
            });
        },

        async getReduceRuleDetail() {
            const { code, data }: any = await getReduceRule({ sellerId: app.globalData.sellerId }).catch((error) => {});
            if (code === 200) {
                this.setData({
                    reduceInfo: data
                });
            }
        },

        async getRuleDetial() {
            const { code, data }: any = await getRule().catch((error) => {});
            if (code === 200) {
                const ruleInfo = data.map((item: any) => {
                    if (item.marketCouponOptionApplies?.length > 0) {
                        item.totalCouponMoney = item.marketCouponOptionApplies
                            .map((cItem: any) => cItem.amount * cItem.totalReceiveCount)
                            .reduce((pre: number, cur: number) => Number((pre + cur).toFixed(1)), 0);
                    } else {
                        item.totalCouponMoney = null;
                    }

                    // 处理卡里面的次数卡数值
                    if (item.cardVoList?.length > 0) {
                        item.cardVoList.forEach((vm, index) => {
                            if(vm.cardTypeStr=='次数卡'){
                               vm.cardQuota = Math.round(vm.cardQuota)
                            }
                        })
                    } else {
                        item.cardVoList = null;
                    }
                    return item;
                });
                this.setData({
                    ruleInfo
                });
            }
        }
    }
}
</script>
<style lang="less" scoped>
	@import "../../../../commin/flex.less";
page {
    background-color: #eff2f5;
    position: relative;
    padding-bottom: 100rpx;
}
.recruit_plan {
    padding: 16rpx 24rpx 0;
}
.recruit_plan .recruit_class_desc {
    font-size: 20rpx;
    color: #909399;
    margin-top: 40rpx;
}
.recruit_plan .recruit_class_desc text {
    color: #fc724c;
}
.recruit_plan .box {
    background: linear-gradient(0deg, #ffffff, #f4f6f8);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    border-radius: 16rpx;
    padding: 0 32rpx 40rpx 32rpx;
    margin-bottom: 16rpx;
    border: 2rpx solid #ffffff;
}
.recruit_plan .box_title {
    width: 341rpx;
    height: 90rpx;
    position: relative;
    left: -38rpx;
    top: -10rpx;
}
.recruit_plan .box_title text {
    font-size: 32rpx;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    z-index: 1;
    margin-left: 38rpx;
}
.recruit_plan .box_title .bg {
    width: 100%;
    height: 100%;
    position: absolute;
}
.recruit_plan .icon_tab {
    margin-top: 34rpx;
}
.recruit_plan .icon_tab .icon_tab_item {
    position: relative;
    width: 180rpx;
}
.recruit_plan .icon_tab .icon_tab_item .title {
    font-size: 26rpx;
    font-weight: 500;
    color: #606266;
}
.recruit_plan .icon_tab .icon_tab_item .icon {
    width: 100rpx;
    height: 100rpx;
    margin-bottom: 16rpx;
}
.recruit_plan .icon_tab .icon_tab_item .dot {
    width: 12rpx;
    height: 12rpx;
    background: #fab9a7;
    border-radius: 50%;
    position: absolute;
    top: 25%;
    right: -35rpx;
}
.recruit_plan .icon_tab .icon_tab_item .dot::after {
    position: absolute;
    left: 20rpx;
    width: 9rpx;
    height: 9rpx;
    background: #dadfe3;
    border-radius: 50%;
    content: '';
    top: 50%;
    transform: translateY(-50%);
}
.recruit_plan .icon_tab .icon_tab_item .dot::before {
    position: absolute;
    content: '';
    right: 20rpx;
    width: 9rpx;
    height: 9rpx;
    background: #dadfe3;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}
.recruit_plan .explain_wrap {
    margin-top: 40rpx;
}
.recruit_plan .explain_wrap .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #303133;
    margin-bottom: 23rpx;
}
.recruit_plan .explain_wrap .desc {
    font-size: 24rpx;
    color: #909399;
}
.recruit_plan .recruit_class .recruit_class_item {
    // border-bottom: 1rpx dotted #c0c4cc;
    padding: 24rpx;
    margin-bottom: 20rpx;
    background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
    box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166,171,178,0.2392);
    border-radius: 16rpx;
    border: 2rpx solid #FFFFFF;
}
// .recruit_plan .recruit_class .recruit_class_item .title_wrap {
//     padding-top: 40rpx;
// }
.recruit_plan .recruit_class .recruit_class_item .title_wrap .level {
    font-size: 34rpx;
    font-weight: bold;
    color: #ad6030;
    margin-right: 24rpx;
}
.recruit_plan .recruit_class .recruit_class_item .title_wrap .title {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ad6030;
}
.recruit_plan .recruit_class .recruit_class_item .desc {
    font-size: 20rpx;
    font-weight: 500;
    color: #909399;
    line-height: 36px;
    margin-bottom: 10rpx;
}
.recruit_plan .recruit_class .recruit_class_item .desc text {
    color: #fc724c;
}
.recruit_plan .recruit_class .recruit_class_item .card_item {
    position: relative;
    width: 202rpx;
    height: 192rpx;
    z-index: 1;
    margin-right: 15rpx;
    margin-bottom: 24rpx;
}
.recruit_plan .recruit_class .recruit_class_item .card_item:nth-child(3) {
    margin-right: 0;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .bg {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .title {
    font-size: 30rpx;
    font-weight: bold;
    color: #fc724c;
    line-height: 40rpx;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .btn {
    position: relative;
    width: 182rpx;
    height: 65rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: #a14b20;
}
.recruit_plan .recruit_class .recruit_class_item .card_item .btn .btn_frame {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.btn_wrap {
    width: 100%;
    height: 120rpx;
    background: #ffffff;
    margin-top: 40rpx;
}
.btn_wrap .btn {
    width: 686rpx;
    height: 88rpx;
    background: linear-gradient(105deg, #268ae8, #1487fa);
    box-shadow: 0px 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
    border-radius: 44rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #ffffff;
}
.tips {
    padding: 0 42rpx;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 3;
    background: rgba(144, 147, 153, 0.9);
    height: 80rpx;
}
.tips .icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 27rpx;
}
.tips .text {
    font-size: 28rpx;
    color: #ffffff;
}
.tips_bg1 {
    background: #f7a14a;
}
.rules_title {
    border-bottom: 1px solid #dcdfe6;
    height: 100rpx;
    font-size: 30rpx;
    font-weight: bold;
    color: #303133;
}
.rules_desc {
    font-size: 26rpx;
    font-family: PingFang SC;
    color: #303133;
    line-height: 39rpx;
    padding: 40rpx 0;
}


.box_view{
    // padding: 0 24rpx;
}


// 卡券
.cashCouponList {
    width: 100%;
    padding: 40rpx 40rpx 20rpx 40rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    background: #FDF1E5;
    // border-radius: 10px 10px 10px 10px;
    // opacity: 0.6;

    .cashCouponItem {
        width: 180rpx;
        height: 180rpx;
        color: #fc724c;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        position: relative;
        margin-right: 12rpx;
        margin-bottom: 25rpx;

        >view:nth-of-type(1) {
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #a26d35;
            position: absolute;
            top: 10rpx;
        }

        >view:nth-of-type(2) {
            font-size: 28rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 800;
            color: #f0703e;
        }

        >view:nth-of-type(3) {
            font-size: 24rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;
            color: #fad9b1;
            position: absolute;
            bottom: 15rpx;
        }
    }
    .cashCouponItem:nth-child(3n + 3) {
        margin-right: 0rpx;
    }

}



.bottomBtn {
    width: 100%;
    height: 120rpx;
    background: linear-gradient(360deg, #ffffff 0%, #f4f6f8 99%, #f4f6f8 100%);
    box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    border: 2rpx solid rgba(255, 255, 255, 0.549);
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    .button {
        width: 92%;
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        background: #6DB12E;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        opacity: 1;
        font-size: 30rpx;
        font-weight: 400;
        color: #ffffff;
    }
}


</style>
